<template>
  <div>
    <div class="c-p c-lh30" :id="'text' + aswerInfo.examMainId" v-if="aswerInfo.content">
      <div class="c-ww-bw c-lh30" v-for="(cItem,cIndex) in aswerInfo.content.split('\n')" :key="cIndex">{{cItem}}</div>
    </div>
    <div class="c-flex-row c-justify-end c-w100" v-if="aswerInfo.content">
      <div @click.stop="clickShowMore" v-if="showDesc" class="theme-fc">{{showMore ? '收起':'展开'}}</div>
    </div>
  </div>

</template>

<script>
let textLineHeight = 0;
export default {
  name: "clockAswerContent",
  components: {
  },
  props: {
    aswerInfo: {
      type: Object,
      default: function () {
        return {}
      }
    },
    homeworkType: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      showDesc: false,
      showMore: false,
    };
  },

  computed: {},
  watch: {
    aswerInfo(val) {
      if (val) {
        this.Descfun()
      }
    }
  },
  methods: {
    Descfun() {
      this.showDesc = false;
      this.showMore = false;
      this.$nextTick(() => {
        //获取当前内容的行高，超过3行则显示更多
        let queryTextContent = this.aswerInfo.examMainId && document.querySelectorAll("#text" + this.aswerInfo.examMainId)[0];
        if (!queryTextContent) {
          return;
        }
        textLineHeight = window.getComputedStyle(queryTextContent).lineHeight.split("px")[0].split(".")[0];
        console.log(document.querySelectorAll("#text" + this.aswerInfo.examMainId)[0], queryTextContent.offsetHeight >= textLineHeight * 2)
        if (queryTextContent.offsetHeight >= textLineHeight * 2) {
          queryTextContent.style.height = textLineHeight * 2 + "px";
          queryTextContent.className = "c-p c-lh30 c-text-hidden";
          this.showDesc = true;
        }
      });
    },
    clickShowMore() {
      if (this.showMore) {
        let textId = document.getElementById(`text${this.aswerInfo.examMainId}`);
        textId.style.height = textLineHeight * 2 + "px";
        textId.className = "c-p c-lh30 c-text-hidden";
        this.showMore = false;
      } else {
        let textId = document.getElementById(`text${this.aswerInfo.examMainId}`);
        textId.style.height = "";
        textId.className = "c-p c-lh30";
        this.showMore = true;
      }
    }
  },
  mounted() {
    this.Descfun()
  },
  activated() {
    this.showDesc = false;
    this.showMore = false;
  },
  deactivated() {
    this.showDesc = false;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img-play-btn {
    position: absolute;
    top: 50%;
    background-color: rgba(0,0,0,0.2);
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.bottom-triangle {
  top: 1rem;
  left: 0;
  width: 0;
  height: 0;
  border-width: 0.6rem;
  border-style: solid;
  border-color: #fbb449 transparent transparent transparent;
}
.bottom-triangle-text {
  top: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
}
.teacherbg{
  background: linear-gradient(316deg,#f45300, #ff9f5a 88%);
}
.c-vcAlign-texttop{
  vertical-align: text-top;
}
</style>
